<template>
  <!-- 分步表单组件容器 -->
  <div class="step-form-container">
    <!-- 步骤指示器 -->
    <el-steps :active="currentStep" finish-status="success" align-center>
      <el-step 
        v-for="(step, index) in steps" 
        :key="index" 
        :title="step.title" 
      />
    </el-steps>

    <!-- 动态表单内容区域 -->
    <div class="step-content mt">
      <!-- 使用动态组件渲染当前步骤的表单 -->
      <slot :name="`step-${currentStep + 1}`"></slot>
    </div>

    <!-- 导航按钮区域 -->
    <div class="step-actions">
      <!-- 上一步按钮 - 只在非第一步显示 -->
      <el-button 
        v-if="currentStep > 0" 
        @click="prevStep"
      >
        上一步
      </el-button>
      
      <!-- 下一步/提交按钮 -->
      <el-button 
        type="primary" 
        @click="handleStepAction"
      >
        {{ isLastStep ? "提交" : "下一步" }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

// 定义组件接收的Props类型
interface StepFormProps {
  steps: Array<{ title: string }>; // 步骤配置数组
  form1?: any; // 第一步表单引用(可选)
  form2?: any; // 第二步表单引用(可选)
  form3?: any; // 第三步表单引用(可选)
}

// 接收父组件传递的属性
const props = defineProps<StepFormProps>();

// 当前步骤索引(从0开始)
const currentStep = ref<number>(0);

// 计算属性：判断是否为最后一步
const isLastStep = computed(() => currentStep.value === props.steps.length - 1);

// 处理步骤动作(下一步或提交)
const handleStepAction = async () => {
  // 如果是最后一步，提交表单
  if (isLastStep.value) {
    await submitForm();
    return;
  }
  
  // 否则，执行下一步操作
  await nextStep();
};

// 下一步操作
const nextStep = async () => {
  try {
    // 获取当前步骤对应的表单引用
    const currentFormRef = props[`form${currentStep.value + 1}` as keyof StepFormProps];
    
    // 如果当前步骤有表单引用，则进行验证
    if (currentFormRef) {
      // 使用Promise包装表单验证，便于使用await
      const isValid = await new Promise<boolean>((resolve) => {
        currentFormRef.validate((valid: boolean) => resolve(valid));
      });
      
      // 如果验证失败，停止执行
      if (!isValid) {
        console.warn(`第${currentStep.value + 1}步表单验证失败`);
        return;
      }
    }
    
    // 验证通过，前进到下一步
    if (currentStep.value < props.steps.length - 1) {
      currentStep.value++;
    }
  } catch (error) {
    console.error("执行下一步时发生错误:", error);
  }
};

// 上一步操作
const prevStep = () => {
  // 确保当前不是第一步时才后退
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

// 提交表单
const submitForm = async () => {
  try {
    // 获取最后一步的表单引用
    const lastFormRef = props[`form${props.steps.length}` as keyof StepFormProps];
    
    // 如果最后一步有表单引用，则进行验证
    if (lastFormRef) {
      // 使用Promise包装表单验证
      const isValid = await new Promise<boolean>((resolve) => {
        lastFormRef.validate((valid: boolean) => resolve(valid));
      });
      
      // 如果验证失败，停止执行
      if (!isValid) {
        console.warn("最后一步表单验证失败");
        return;
      }
    }
    
    // 所有验证通过，提交表单
    console.log("表单提交成功");
    // 这里可以触发提交事件或调用API
    // emit('submit', formData);
  } catch (error) {
    console.error("提交表单时发生错误:", error);
  }
};
</script>

<style scoped>
.step-form-container {
  max-width: 600px;
  margin: 0 auto;
}

.step-content {
  margin: 24px 0;
  min-height: 200px; /* 确保内容区域有最小高度 */
}

.step-actions {
  display: flex;
  justify-content: center;
  gap: 12px; /* 按钮间距 */
  margin-top: 24px;
}

.mt {
  margin-top: 20px;
}
</style>